<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GoldenLayout- a multi-window javascript layout manager for webapps</title>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML5, JavaScript, Layout Manager, webapp" />
	<meta name="description" content="GoldenLayout- a multi-window javascript layout manager for webapps" />
	<meta name="author" content="Wolfram Hempel" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="../assets/css/screen.css" />
	
	<link rel="stylesheet" type="text/css" href="../assets/css/api.css" />
	<link rel="stylesheet" type="text/css" href="../assets/css/syntaxhighlighter.css" />
	
	<script type="text/javascript">
	document.createElement( 'header' );
	document.createElement( 'nav' );
	</script>
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
</head>
<body class="category_tutorials">
	<div id="modal" class="loading">
		<div class="background"></div>
		<div class="content-wrapper">
			<div class="head">
				<div class="close"></div>
				<span class="title"></span>
			</div>
			<div class="content"></div>
		</div>
	</div>
	
	<div id="outerWrapper">
		

		
		<div id="nav" class="standalone">
			<div class="start-bg"></div>
			<ul>
				<li ><a href="..">Start</a></li>
				<li ><a href="../download">Download</a></li>
				<li ><a href="../examples">Demos</a></li>
				<li class="active"><a href="../tutorials">Tutorials</a></li>
				<li ><a href="../docs">Docs</a></li>
				<li ><a href="../faq">Faq</a></li>
			</ul>
			<iframe src="https://ghbtns.com/github-btn.html?user=deepstreamIO&repo=golden-layout&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

		</div>
		
		<div id="wrapper" class="main">
			<ul id="subnav">
	<li class="head first">GoldenLayout</li>
	<li >
		<a href="getting-started.html">Getting Started</a>
	</li>
	<li >
		<a href="getting-started-react.html">Getting Started ReactJS</a>
	</li>
	<li >
		<a href="saving-state.html">Saving State</a>
	</li>
	<li >
		<a href="dynamically-adding-components.html">Adding Items</a>
	</li>
	<li >
		<a href="adding-controls-to-header.html">Header Controls</a>
	</li>
	<li >
		<a href="working-with-popouts.html">Popouts</a>
	</li>
	<li >
		<a href="extending-tabs.html">Extending Tabs</a>
	</li>

	<li class="head">Usage with...</li>
	<li >
		<a href="requirejs.html">RequireJS</a>
	</li>
	<li >
		<a href="angular-simple.html">Angular (simple)</a>
	</li>
	<li >
		<a href="angular-complex.html">Angular (complex)</a>
	</li>
	<li class="active">
		<a href="highcharts.html">HighCharts</a>
	</li>
	<li >
		<a href="slickgrid.html">SlickGrid</a>
	</li>
</ul>
			<div id="content">
				<h1>Using GoldenLayout with HighCharts and Yahoo Finance</h1><p>This tutorial shows how to create a layout with multiple historic stockprice charts using GoldenLayout, <a href="http://www.highcharts.com/">HighCharts</a> and data from the <a href="https://developer.yahoo.com/yql/console/?q=show%20tables&amp;env=store://datatables.org/alltableswithkeys#h=select+*+from+yahoo.finance.historicaldata+where+symbol+%3D+%22YHOO%22+and+startDate+%3D+%222009-09-11%22+and+endDate+%3D+%222010-03-10%22">Yahoo Finance API</a>. It tries to be a bit more complex, real-worldy use case.</p><h3>Here&#39;s what we&#39;re after</h3><p><p data-height="268" data-theme-id="7376" data-slug-hash="c0c2f3811adfef1f8fc3d78c47686409" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/wolframhempel/pen/c0c2f3811adfef1f8fc3d78c47686409/'>HighCharts, YQL and GoldenLayout</a> by Wolfram Hempel (<a href='http://codepen.io/wolframhempel'>@wolframhempel</a>) on <a href='http://codepen.io'>CodePen</a>.</p></p><script async src="//codepen.io/assets/embed/ei.js"></script>

<h3>Structure</h3><p>This example consists of three parts:</p><ul>
<li>A <code>StockDataRequest</code> class that retrieves data from Yahoo Finance using YQL (Yahoo Query Language)</li>
<li>A <code>StockChartComponent</code> class that handles the interaction between HighCharts, GoldenLayout and the DataProvider</li>
<li>A bootstrap script to configure and initialise the layout</li>
</ul>
<p>For this tutorial we&#39;ll concentrate on the <code>StockChartComponent</code> class and the layout configuration. If you&#39;d like to learn more about the <code>StockDataRequest</code> class, please have a look at the Codepen above.</p><h3>GoldenLayout config</h3><p>Let&#39;s start with the configuration for GoldenLayout.</p><pre><code><span class="token keyword" >var</span> myLayout <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >GoldenLayout</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
    content<span class="token punctuation" >:</span><span class="token punctuation" >[</span><span class="token punctuation" >{</span>
        type<span class="token punctuation" >:</span> <span class="token string" >'row'</span><span class="token punctuation" >,</span>
        content<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
            type<span class="token punctuation" >:</span> <span class="token string" >'component'</span><span class="token punctuation" >,</span>
            componentName<span class="token punctuation" >:</span> <span class="token string" >'stockChart'</span><span class="token punctuation" >,</span>
            componentState<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
                companyName<span class="token punctuation" >:</span> <span class="token string" >'Google Inc.'</span><span class="token punctuation" >,</span>
                tickerSymbol<span class="token punctuation" >:</span> <span class="token string" >'GOOGL'</span><span class="token punctuation" >,</span>
                color<span class="token punctuation" >:</span><span class="token string" >'#7C7'</span>
            <span class="token punctuation" >}</span>
        <span class="token punctuation" >}</span><span class="token punctuation" >,</span><span class="token punctuation" >{</span>
            type<span class="token punctuation" >:</span> <span class="token string" >'component'</span><span class="token punctuation" >,</span>
            componentName<span class="token punctuation" >:</span> <span class="token string" >'stockChart'</span><span class="token punctuation" >,</span>
            componentState<span class="token punctuation" >:</span> <span class="token punctuation" >{</span>
                companyName<span class="token punctuation" >:</span> <span class="token string" >'Apple Inc.'</span><span class="token punctuation" >,</span>
                tickerSymbol<span class="token punctuation" >:</span> <span class="token string" >'AAPL'</span><span class="token punctuation" >,</span>
                color<span class="token punctuation" >:</span> <span class="token string" >'#77C'</span> 
            <span class="token punctuation" >}</span>
        <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>

myLayout<span class="token punctuation" >.</span><span class="token function" >registerComponent<span class="token punctuation" >(</span></span> <span class="token string" >'stockChart'</span><span class="token punctuation" >,</span> StockChartComponent <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
myLayout<span class="token punctuation" >.</span><span class="token function" >init<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>It creates a basic layout with two components in a row (if you&#39;re not familiar with GoldenLayout configs yet, please have a look at the <a href="getting-started.html">getting started tutorial</a>). The <code>componentState</code> attribute contains three keys:</p><ul>
<li><code>companyName</code> will be used for the chart&#39;s title and series description</li>
<li><code>tickerSymbol</code> is a standardised way of identifying stocks and will be used to download the right historical prices from Yahoo Finance</li>
<li><code>color</code> defines the line-color for the plot</li>
</ul>
<h3>StockChartComponent</h3><p>The StockChart component is the glue between HighCharts, GoldenLayout and Yahoo Finance. The complete class looks like this:</p><pre><code>StockChartComponent <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> container<span class="token punctuation" >,</span> state <span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_highChartsConfig <span class="token operator" >=</span> <span class="token punctuation" >{</span>
        title<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> text<span class="token punctuation" >:</span> <span class="token string" >'Historic prices for '</span> <span class="token operator" >+</span> state<span class="token punctuation" >.</span>companyName <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        series<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >]</span><span class="token punctuation" >,</span>
        plotOptions<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> line<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> marker<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> enabled<span class="token punctuation" >:</span> <span class="token keyword" >false</span> <span class="token punctuation" >}</span> <span class="token punctuation" >}</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        xAxis<span class="token punctuation" >:</span><span class="token punctuation" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >'datetime'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        yAxis<span class="token punctuation" >:</span><span class="token punctuation" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >'Price in USD'</span> <span class="token punctuation" >}</span><span class="token punctuation" >,</span>
        chart<span class="token punctuation" >:</span><span class="token punctuation" >{</span> renderTo<span class="token punctuation" >:</span> container<span class="token punctuation" >.</span><span class="token function" >getElement<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >[</span> <span class="token number" >0</span> <span class="token punctuation" >]</span> <span class="token punctuation" >}</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >;</span>

    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container <span class="token operator" >=</span> container<span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_state <span class="token operator" >=</span> state<span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart <span class="token operator" >=</span> <span class="token keyword" >null</span><span class="token punctuation" >;</span>

    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >setTitle<span class="token punctuation" >(</span></span> <span class="token string" >'Chart for '</span> <span class="token operator" >+</span> state<span class="token punctuation" >.</span>companyName <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'open'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_createChart<span class="token punctuation" >.</span><span class="token function" >bind<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>

StockChartComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_createChart <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >Highcharts<span class="token punctuation" >.</span>Chart</span><span class="token punctuation" >(</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_highChartsConfig <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart<span class="token punctuation" >.</span><span class="token function" >showLoading<span class="token punctuation" >(</span></span> <span class="token string" >'Loading data...'</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >new</span> <span class="token class-name" >StockDataRequest</span><span class="token punctuation" >(</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_state<span class="token punctuation" >.</span>tickerSymbol<span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_onDataReady<span class="token punctuation" >.</span><span class="token function" >bind<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>

StockChartComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_onDataReady <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span> highchartsData <span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart<span class="token punctuation" >.</span><span class="token function" >addSeries<span class="token punctuation" >(</span></span><span class="token punctuation" >{</span>
        color<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_state<span class="token punctuation" >.</span>color<span class="token punctuation" >,</span>
        name<span class="token punctuation" >:</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_state<span class="token punctuation" >.</span>companyName<span class="token punctuation" >,</span>
        data<span class="token punctuation" >:</span> highchartsData
    <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>

    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart<span class="token punctuation" >.</span><span class="token function" >hideLoading<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >_bindContainerEvents<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>

StockChartComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_bindContainerEvents <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'resize'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_setSize<span class="token punctuation" >.</span><span class="token function" >bind<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'destroy'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart<span class="token punctuation" >.</span>destroy<span class="token punctuation" >.</span><span class="token function" >bind<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart <span class="token punctuation" >)</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>

StockChartComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_setSize <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart<span class="token punctuation" >.</span><span class="token function" >setSize<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span>width<span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span>height <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
</code></pre><p>Some bits worth noting</p><h4>getElement() returns a jQuery element</h4><pre><code>chart<span class="token punctuation" >:</span><span class="token punctuation" >{</span> renderTo<span class="token punctuation" >:</span> container<span class="token punctuation" >.</span><span class="token function" >getElement<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >[</span> <span class="token number" >0</span> <span class="token punctuation" >]</span> <span class="token punctuation" >}</span>
</code></pre><p><code>container.getElement()</code> returns a jQuery wrapped DOM element, yet HighCharts expects a raw element. <code>container.getElement()[ 0 ]</code> allows to access it.</p><h4>setting titles</h4><pre><code><span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >setTitle<span class="token punctuation" >(</span></span> <span class="token string" >'Chart for '</span> <span class="token operator" >+</span> state<span class="token punctuation" >.</span>companyName <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>Every item in GoldenLayout can have a title. Titles are displayed on tabs or on window headers and can either be passed by configuration or set programmatically by calling <code>item.setTitle( title )</code> or <code>container.setTitle( title )</code></p><h4>deferring chart creation until the container is open</h4><pre><code><span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart <span class="token operator" >=</span> <span class="token keyword" >null</span><span class="token punctuation" >;</span>
<span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'open'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_createChart<span class="token punctuation" >.</span><span class="token function" >bind<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>

StockChartComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_createChart <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >Highcharts<span class="token punctuation" >.</span>Chart</span><span class="token punctuation" >(</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_highChartsConfig <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>
<span class="token punctuation" >}</span>
</code></pre><p>When GoldenLayout creates the component it is not yet sized or attached to the DOM. This is okay for most cases, but some libraries like HighCharts or SlickGrid measure the size of the element they are placed into and resize themselves accordingly.</p><p>To support this, we&#39;ll have to wait until the container&#39;s <code>open</code> event.</p><h4>handle resizing</h4><pre><code>StockChartComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_bindContainerEvents <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'resize'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_setSize<span class="token punctuation" >.</span><span class="token function" >bind<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span> <span class="token punctuation" >)</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
    <span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>

StockChartComponent<span class="token punctuation" >.</span>prototype<span class="token punctuation" >.</span>_setSize <span class="token operator" >=</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
    <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart<span class="token punctuation" >.</span><span class="token function" >setSize<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span>width<span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span>height <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
</code></pre><p>If your component&#39;s reflow is purely managed by CSS it will adjust to whatever size its container is. But for many usecases you&#39;d want to resize it programmatically, e.g. to redraw a chart or to add / remove rows from a virtualised grid.</p><h4>clean up</h4><pre><code><span class="token keyword" >this</span><span class="token punctuation" >.</span>_container<span class="token punctuation" >.</span><span class="token function" >on<span class="token punctuation" >(</span></span> <span class="token string" >'destroy'</span><span class="token punctuation" >,</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart<span class="token punctuation" >.</span>destroy<span class="token punctuation" >.</span><span class="token function" >bind<span class="token punctuation" >(</span></span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>_chart <span class="token punctuation" >)</span> <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>Cleaning up after your components is important to prevent memoryleaks. Especially for apps that allow to add or remove components at runtime.</p>
				
				<h3>Comments and Questions</h3>
				<div id="disqusContainer">
					<div id="disqus_thread"></div>
				    <script type="text/javascript">
				        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				        var disqus_shortname = 'goldenlayoutcom'; // required: replace example with your forum shortname

				        /* * * DON'T EDIT BELOW THIS LINE * * */
				        (function() {
				            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
				            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
				            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				        })();
				    </script>
				    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
				    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			    
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/docs.js"></script>
		
		<div id="footerPush"></div>
	</div>
	<div id="footer">
		<div class="footer-content">
			<div class="copyright">&copy;<span class="year"></span> deepstreamHub GmbH</div>
			<script type="text/javascript">
			$('.year').html( (new Date()).getFullYear() );
			</script>
			<ul class="footerItems">
				<li>
					<a href="https://github.com/deepstreamIO/golden-layout">Github</a>
					<a href="https://www.npmjs.com/package/golden-layout">NPM</a>
					<div>bower/npm: <code>'golden-layout'</code></div>
				</li>
				<li>
					<div>deepstreamHub GmbH</div>
					<div>Lindenstrasse 20-25</div>
					<div>10969 Berlin</div>
				</li>
				<li>
					<a href="mailto:info@deepstreamhub.com">info@deepstreamhub.com</a>
					<a href="https://deepstreamhub.com/">deepstreamHub.com</a><br />
					<a href="https://twitter.com/wolframhempel">by @wolframhempel</a>

				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="../assets/js/Modal.js"></script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-63583386-5', 'auto');
	  ga('send', 'pageview');

	</script>
	
</body>
</html>